<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1-Session步长分析</title>
    <!-- cdn for axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- cdn for echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

    <style>
        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 30px;
            width: 860px;
            height: 600px;
            background-color: #f5f5f5;
        }
    </style>
</head>

<body>

<div class="container" id="main"></div>
<script>

    // Initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'));

    // Chart options
    var option = {
        title: {
            text: "Session的访问步长分析",
            x: "center",
            link: ""
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            backgroundColor: "rgba(0,0,0,0.7)",
            textStyle: {
                color: "#fff"
            },
            axisPointer: {
                lineStyle: {
                    color: "rgb(41, 100, 142)"
                },
                areaStyle: {
                    type: "default"
                }
            }
        },
        legend: {
            orient: "vertical",
            x: "left",
            data: []
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        series: [
            {
                name: "ratio",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "rgb(42, 55, 61)"
                            }
                        }
                    }
                }
            }
        ],
        animation: true
    };

    function fetchData() {
        axios.post('http://localhost:8080/get', {
            "taskid": "6d8a5d75-b1a0-4852-a835-cc89ea7e5dd0",
            "SessionStatRatio": {
                "@column": "step_length_1_3_ratio;step_length_4_6_ratio;step_length_7_9_ratio;step_length_10_30_ratio;step_length_30_60_ratio"
            }
        }, {
            timeout: 5000 // 设置超时时间为5秒
        }).then(function (response) {
            if (response.data.ok) {
                option.title.subtext = "taskID: " + response.data.taskid;
                option.legend.data = Object.keys(response.data.SessionStatRatio);
                var dataObj = response.data.SessionStatRatio;
                var data = Object.keys(dataObj).map(function (key) {
                    return {
                        value: dataObj[key],
                        name: key
                    };
                });

                option.series[0].data = data;
                myChart.setOption(option);
            } else {
                console.log(response.data.error);
                alert("请求失败，请检查网络连接");
            }
        }).catch(function (error) {
            console.log(error);
            alert("请求失败，请检查网络连接");
        });
    }

    // 初始请求数据并渲染
    fetchData();

    // 定时器，每30分钟重新请求数据并渲染
    setInterval(fetchData, 30 * 60 * 1000);

</script>
</body>

</html>
